<template>
    <div>
        <div class="dragContainer">
            <div class="target" v-drag="{'wrap':'.dragContainer'}"></div>
        </div>
        <v-md-preview style="overflow-y: scroll;height: 100%" :text="md"></v-md-preview>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

let md = ref('')
fetch('write.md').then(res => {
    return res.text()
}).then(result => {
    console.log(result);
    md.value = result
})
</script>
<style lang='scss' scoped>
    .dragContainer{
        height: 50vh;
        width: 100%;
        overflow: hidden;
        position: relative;
        border: 1px dashed #ccc;
        border-radius: 5px;
        background-color: #f5f5f5;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &:hover{
            border: 1px dashed #000;
        }
        .target{
            width: 100px;
            height: 100px;
            border: 1px dashed #1369c4;
            border-radius: 5px;
            position: absolute;
            cursor: pointer;
            &:hover{
                border: 1px dashed #000;
            }
        }
    }
</style>